import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, Swiper, SwiperItem } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { Header } from '../common/header';
import { GoodsItem } from '../components/goods/goods'
import { connect } from '@tarojs/redux'
import { State, Props } from './index.interface'
import './index.scss'
import { globalData } from '../../utils/common';

@connect(({ index }) => ({
  ...index,
}))

export class IndexItem extends Component<State, Props> {
  constructor(props: Props) {
    super(props);
  }

  componentWillMount() { }

  async componentDidMount() {
    const { dispatch } = this.props;
    await dispatch({
      type: 'index/getBanner',
      payload: {}
    })
  }

  handleRedirect(pages) {
    if (pages) {
      Taro.navigateTo({
        url: pages
      });
    }
  }

  render() {
    const { mbuttom } = globalData;
    const { banner } = this.props;
    return (
      <View style={{ paddingBottom: mbuttom }}>
        <Header title='商城'></Header>
        <Swiper
          className='test-h'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          indicatorDots
          autoplay>
          <View>
            {
              banner.map(function (item) {
                console.log(item);
                return <SwiperItem>
                  <Image src={item.images} mode='widthFix' onClick={this.handleRedirect.bind(this, item.url)} />
                </SwiperItem>
              })
            }
          </View>
        </Swiper>
        <View className='index-active'>
          <View className='index-active-item'>
            <Image src='http://images.guoxiaoge.cn/%E9%82%80%E8%AF%B7@2x.png' mode='widthFix' />
            <Text>邀请有礼</Text>
          </View>
          <View className='index-active-item' onClick={this.handleRedirect.bind(this, '/pages/center/sign')}>
            <Image src='http://images.guoxiaoge.cn/%E8%AE%A2%E5%9C%BA@2x.png' mode='widthFix' />
            <Text>每日签到</Text>
          </View>
          <View className='index-active-item' onClick={this.handleRedirect.bind(this, '/pages/order/index?index=0')}>
            <Image src='http://images.guoxiaoge.cn/%E8%AE%A2%E5%8D%95%284%29@2x.png' mode='widthFix' />
            <Text>订单查询</Text>
          </View>
          <View className='index-active-item'>
            <Image src='http://images.guoxiaoge.cn/%E5%85%85%E5%80%BC@2x.png' mode='widthFix' />
            <Text>立即充值</Text>
          </View>
        </View>
        <View className='index-active-recommond'>
          <Image className='index-active-recommond-1' src='http://images.guoxiaoge.cn/%E5%9B%BE%E5%B1%822@2x.png' mode='widthFix' />
          <Image className='index-active-recommond-2' src='http://images.guoxiaoge.cn/%E5%93%81%E9%B2%9C%E5%BF%AB%E4%BA%BA%E4%B8%80%E6%AD%A5@2x.png' mode='widthFix' />
          <Image className='index-active-recommond-3' src='http://images.guoxiaoge.cn/%E6%8B%BC%E8%B6%8A%E5%A4%9A%E7%9C%81%E8%B6%8A%E5%A4%9A@2x.png' mode='widthFix' />
          <Image src='http://images.guoxiaoge.cn/%E8%BD%BB%E6%9D%BE%E4%BA%AB%E5%8F%97%E6%8A%98%E4%B8%8A%E6%8A%98@2x.png' mode='widthFix' />
        </View>
        <View className='index-goods-list'>
          <View className='index-goods-list-title'>
            <View className='index-goods-list-title-content'>
              <Text>编辑精选</Text>
              <View></View>
            </View>
            <View className='index-goods-list-more' onClick={this.handleRedirect.bind(this, '/pages/goods/goods')}>
              <Text>更多</Text>
              <AtIcon value='chevron-right' size='22' color='#B1B1B1'></AtIcon>
            </View>
          </View>

          {/* goods-item */}
          <GoodsItem />
        </View>
      </View>
    )
  }
}